import { DatePicker, Form, Input, message, Modal, Popover, Select } from "antd";
import { FC, useEffect, useState } from "react";
import { handlegetGoodList, ISelectList } from "../../../../VehicleFile/api";
import { postDataSave } from "../../api";
import dayjs from "dayjs";
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider";
import { ShengDiv, ShengTanchaung } from "../../../../../assets/style/ShengTanchaung";
import { licensePlateAbbreviations } from "../../../../../assets/data";


const AddInfo: FC<{
    AddOpenShow: boolean
    AddCallBack: () => void
}> = ({
    AddOpenShow, AddCallBack,
}) => {
        const [departmentData, setDepartmentData] = useState<ISelectList[]>([]);
        const [carSheng, setCarSheng] = useState('陕'); // 省
        const [carShengShow, setCarShengShow] = useState(false); // 省弹窗显示与否
        const [form] = Form.useForm();
        const { validateFields, resetFields } = form;
        const handleOk = async () => {
            const values = await validateFields();
            values.emptyTime = dayjs(values.emptyTime).format('YYYY-MM-DD HH:mm:ss')
            values.weightTime = dayjs(values.weightTime).format('YYYY-MM-DD HH:mm:ss')
            values.carNum = carSheng + values.carNum
            // 添加
            const { code, msg } = (await postDataSave(values)) as {
                code: number
                msg: string
            }
            if (code === 20000) {
                message.success('录入成功')
                resetFields()
                AddCallBack()
            } else {
                message.error(msg)
            }
        };
        const handleCancel = () => {
            resetFields()
            AddCallBack()
        };


        useEffect(() => {
            handlegetGoodList().then(
                (res) => {
                    setDepartmentData(res)
                }
            )
        }, [])
        const ShengHtml = <ShengTanchaung>
            {
                licensePlateAbbreviations.map((item) => {
                    return <div
                        key={item}
                        className={carSheng === item ? 'li-car active' : 'li-car'}
                        onClick={() => {
                            setCarSheng(item);
                        }}
                    >
                        {item}
                    </div>
                })
            }
        </ShengTanchaung>

        const prefixSelector = () => {
            return (<div style={{ display: 'flex', alignItems: 'center' }}>
                <Form.Item name={['carColor']} noStyle>
                    <Select
                        style={{ width: '6.5rem' }}
                        options={[
                            { value: "蓝", label: "蓝" },
                            { value: "黄", label: "黄" },
                            { value: "绿", label: "绿" },
                            { value: "黑", label: "黑" },
                        ]}
                    >
                    </Select>
                </Form.Item>
                <Popover content={ShengHtml} trigger="click" onOpenChange={(open) => {
                    setCarShengShow(open)
                }}>
                    <ShengDiv>
                        <span style={{ color: !carShengShow ? 'rgba(0, 0, 0, 0.88)' : 'rgba(0, 0, 0, 0.45)' }} >{carSheng}</span><span className="iconfont" style={{ fontSize: '1.2rem', color: 'rgba(0, 0, 0, 0.88)' }}>&#xe661;</span>
                    </ShengDiv>
                </Popover>

            </div>

            );
        }

        return (
            <div>
                <Modal
                    width={useWindowFontSize(484)}
                    title={'单次录入'}
                    open={AddOpenShow}
                    onOk={handleOk}
                    onCancel={handleCancel}
                    getContainer={false}
                    okText="确认"
                    cancelText="取消"
                >
                    <Form form={form}
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 15 }}
                        labelAlign="right"
                        initialValues={{ carColor: "黄" }}
                    >
                        <Form.Item name="good" label="货品"
                            rules={[{ required: true, message: "请选择货品!" }]}
                        >
                            <Select
                                placeholder="请选择货品"
                                options={departmentData}>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label="车牌号"
                            name="carNum"
                            // normalize={(value) => (value ? value.toUpperCase() : '')}  // 将输入值转换为大写
                            rules={[{ required: true, message: "请输入车牌号!" },
                            ]}
                        >
                            <Input
                                addonBefore={prefixSelector()}
                                placeholder="请输入车牌号"
                            />
                        </Form.Item>
                        <Form.Item
                            label="一次计量重量(吨)"
                            name="pzWeight"
                            rules={[{ required: true, message: "请输入一次计量重量!" }]}
                        >
                            <Input
                                type="number"
                                placeholder="请输入一次计量重量"
                            />
                        </Form.Item>
                        <Form.Item
                            label="一次计量时间"
                            name="emptyTime"
                            rules={[{ required: true, message: "请选择时间!" }]}
                        >
                            <DatePicker
                                style={{ width: '100%' }}
                                showTime
                                placeholder="请选择时间"
                            />
                        </Form.Item>
                        <Form.Item
                            label="二次计量重量(吨)"
                            name="mzWeight"
                            rules={[{ required: true, message: "请输入二次计量重量" }]}

                        >
                            <Input
                                type="number"
                                placeholder="请输入二次计量重量"
                            />
                        </Form.Item>
                        <Form.Item
                            label="二次计量时间"
                            name="weightTime"
                            rules={[{ required: true, message: "请选择时间!" }]}
                        >
                            <DatePicker
                                style={{ width: '100%' }}
                                showTime
                                placeholder="请选择时间"
                            />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
export default AddInfo;